class Details {
    constructor() {
        this.main = document.querySelector('.main')
        this.details = document.querySelector('.details')
        this.init()
    }
    init() {
        this.request()
    }
    //处理查询字符串
    queryStr(name) {
        let arr = location.search.slice(1).split('=')
        let obj = {}
        obj[arr[0]] = arr[1]
        return obj[name]
    }
    //根据id请求数据
    request() {
        let id = this.queryStr('id')
        if (!id) {
            location.href = '../index.html'
        } else {
            pAjax({ url: '../libs/goods.json' })
                .then(res => {
                    let data = JSON.parse(res)
                    this.render(id, data)
                })
        }
    }
    render(id, data) {
        let goods = data.find(item => { return item.goods_id == id })
        this.main.innerHTML = `
            <div class="main-left">
                <img src="${goods.img_big_logo}" class="samlPic">
                <span class="btn"></span>
            </div>
            <div class="main-right">
                <div class="hidden">
                    <img src="${goods.img_big_logo}" class="bigPic">
                </div>
                <span class="txt-top">${goods.title}</span>
                <div class="txt">
                    <span class="priceBox">价格&nbsp;&nbsp;&nbsp;&nbsp;<b class="price">￥${goods.price}</b></span>
                    <span>购立返&nbsp;&nbsp;&nbsp;最高返4积分</span>
                    <span>邮费&nbsp;&nbsp;&nbsp;&nbsp;免邮，合作仓直发</span>
                    <span class="server">服务&nbsp;&nbsp;&nbsp;·严选自营·不支持无忧退换·不可用券/红包·不享受企业折扣·不享受学生折扣·国内部分地区不可配送</span>
                </div>
                <div class="cartBox">
                    <span class="pay">立即购买</span>
                    <span data-id="${goods.goods_id}" class='cartBtn'><i class="iconfont icon-cart"></i>加入购物车</span>
                    <span><i class="iconfont icon-xz"></i>下载严选APP</span>
                </div>
            </div>
        `
        this.details.innerHTML = goods.goods_introduce
        this.glass()
        this.bindHtml(data)
    }
    //放大镜
    glass() {
        this.smallPic = document.querySelector('.main-left')
        this.btn = document.querySelector('.main-left>.btn')
        this.bigPic = document.querySelector('.hidden')
        this.smallPic.onmouseover = () => {
            this.bigPic.style.display = 'block'
            this.btn.style.display = 'block'
        }
        this.smallPic.onmouseout = () => {
            this.bigPic.style.display = 'none'
            this.btn.style.display = 'none'
        }
        this.smallPic.onmousemove = (e) => {
            let x = e.clientX - this.btn.offsetWidth * 2 - this.btn.offsetWidth / 2 + 10
            let y = e.clientY - this.btn.offsetHeight * 2 - this.btn.offsetHeight / 2 - 40
            if (x <= 0) {
                x = 0
            } else if (x >= this.smallPic.offsetWidth - this.btn.offsetWidth) {
                x = this.smallPic.offsetWidth - this.btn.offsetWidth
            }
            if (y <= 0) {
                y = 0
            } else if (y >= this.smallPic.offsetHeight - this.btn.offsetHeight) {
                y = this.smallPic.offsetHeight - this.btn.offsetHeight
            }
            this.btn.style.left = x + 'px'
            this.btn.style.top = y + 'px'
            let w = x / (this.smallPic.offsetWidth - this.btn.offsetWidth)
            let h = y / (this.smallPic.offsetHeight - this.btn.offsetHeight)
            this.bigPic.children[0].style.left = -w * (this.bigPic.children[0].offsetWidth - this.bigPic.offsetWidth) + 'px'
            this.bigPic.children[0].style.top = -h * (this.bigPic.children[0].offsetHeight - this.bigPic.offsetHeight) + 'px'
        }
    }
    //添加购物车
    bindHtml(data) {
        this.cart = document.querySelector('.cartBox')
        this.cart.addEventListener('click', (e) => {
            let target = e.target || e.srcElement
            if (target.className == 'cartBtn') {
                if (getCookie('username') == undefined || getCookie('password') == undefined) {
                    location.href = './login.html'
                } else {
                    let id = target.dataset.id - 0
                    let goods = data.find(item => { return item.goods_id == id })
                    let list = JSON.parse(localStorage.getItem('cart')) || []
                    if (!list.length) {
                        goods.cart_number = 1
                        list.push(goods)
                        console.log(list)
                    } else {
                        let res = list.some(item => { return item.goods_id == id })
                        if (res) {
                            let index = list.findIndex(item => { return item.goods_id == id })
                            list[index].cart_number++
                        } else {
                            goods.cart_number = 1
                            list.push(goods)
                        }
                    }
                    localStorage.setItem('cart', JSON.stringify(list))
                    window.totalNum()
                }
            }
            if (target.className == 'pay') {
                if (getCookie('username') == undefined || getCookie('password') == undefined) {
                    location.href = './login.html'
                } else{
                    location.href = "./pay.html"
                }
            }
        })
    }

}
new Details